<template>
  <div class="permission-container">
    <div class="main-box">
      <div class="main-header">
        <el-button
          type="success"
          round
          size="mini"
          plain
          @click="visible = true"
        >添加权限</el-button>
      </div>
      <div class="main-bottom">
        <el-table :data="tableData" row-key="id">
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="code" label="标识" />
          <el-table-column prop="description" label="描述" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.type === 1"
                type="text"
                size="mini"
                @click="confirm(scope.row)"
              >添加</el-button>
              <el-button
                type="text"
                size="mini"
                @click="editPermission(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                size="mini"
                @click="delPermission(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <small-dialog ref="permissionDialog" :permission-id="permissionId" :visible.sync="visible" :table-data="tableData" @tableList="tableList" />
  </div>
</template>

<script>
// 需求
// 表格分一二级
// 二级表格没有添加按钮
import { getPermissionListAPI, delPermissionAPI } from '@/api/permission'
import { list2Tree } from '@/utils/tree'
import SmallDialog from '../permission/components/small-dialog.vue'
export default {
  name: 'Permission',
  components: {
    SmallDialog
  },
  data() {
    return {
      tableData: [],
      visible: false,
      permissionId: 0
    }
  },
  created() {
    this.tableList()
  },

  methods: {
    async tableList() {
      const { data } = await getPermissionListAPI()
      const result = list2Tree(data, 0)
      this.tableData = result
    },
    confirm(row) {
      this.permissionId = row.id
      this.visible = true
    },
    async editPermission(row) {
      this.$refs.permissionDialog.editPermissionData(row.id)
      this.permissionId = row.id
      this.visible = true
    },
    async delPermission(row) {
      await this.$confirm('确定删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delPermissionAPI(row.id)
      this.tableList()
    }
  }
}
</script>

<style scoped lang="scss" >
.main-box {
  background-color: #fff;
  padding: 20px;
  .main-bottom {
    padding: 20px 40px 0;
  }
}
</style>
